<template>
  <div class="main">
    <div class="form_content">
      <NScrollbar>
        <div class="content">
          <div class="bd-title">{{title}}</div>
          <NSpace>
            <NForm
              ref="formRef"
              :model="formValue"
              :rules="rules"
              label-placement="left"
              :label-width="200"
              label-align="right"
            >
              <h2 class="title">基本信息</h2>
              <NSpace>
                <NFormItem
                  label="姓名:"
                  path="name"
                >
                  <NInput
                    v-model:value="formValue.name"
                    placeholder="输入姓名"
                    style="width: 250px"
                  />
                </NFormItem>
                <NFormItem
                  label="性别:"
                  path="sex"
                >
                  <NSelect
                    :options="sexListOption"
                    v-model:value="formValue.sex"
                    placeholder="请选择性别"
                    clearable
                    style="width: 250px"
                  />
                </NFormItem>
                <NFormItem label="头像:">
                  <div style="width: 250px">
                    <NUpload 
                      :custom-request="(e: any) => commonUpload(e)"
                      multiple
                      @remove="(e: any) => commonRemove(e)"
                      :default-file-list="imgList"
                      :max="1"
                      list-type="image-card"
                    >
                    </NUpload>
                  </div>
                </NFormItem>
                <NFormItem
                  label="级别:"
                  path="levelCode"
                >
                  <NSelect
                    :options="listJOption"
                    v-model:value="formValue.levelCode"
                    placeholder="请选择级别"
                    clearable
                    style="width: 250px"
                    @update:value="onChangeLevel()"
                  />
                </NFormItem>
                <NFormItem
                  label="手机号:"
                  path="mobilePhone"
                >
                  <NInput
                    v-model:value="formValue.mobilePhone"
                    placeholder="输入手机号"
                    style="width: 250px"
                  />
                </NFormItem>
                <NFormItem
                  label="证件类型:"
                  path="cardTypeCode"
                >
                  <NSelect
                    :options="listZOption"
                    v-model:value="formValue.cardTypeCode"
                    placeholder="请选择证件类型"
                    clearable
                    style="width: 250px"
                  />
                </NFormItem>
                <NFormItem
                  label="证件号:"
                  path="cardNum"
                >
                  <NInput
                    v-model:value="formValue.cardNum"
                    placeholder="输入证件号"
                    style="width: 250px"
                  />
                </NFormItem>
                <NFormItem
                  label="文润志愿服务联盟:"
                  path="leagueId"
                >
                  <NSelect
                    :options="listOption"
                    v-model:value="formValue.leagueId"
                    placeholder="请选择文润志愿服务联盟"
                    clearable
                    style="width: 250px"
                  />
                </NFormItem>
                <NFormItem
                  label="现居住地:"
                  path="placeAddress"
                >
                  <NInput
                    v-model:value="formValue.placeAddress"
                    placeholder="输入现居住地"
                    style="width: 250px"
                  />
                </NFormItem>
                <NFormItem
                  label="民族:"
                  path="nation"
                >
                  <NInput
                    v-model:value="formValue.nation"
                    placeholder="输入民族"
                    style="width: 250px"
                  />
                </NFormItem>
                <NFormItem
                  label="常驻居民:"
                  path="residentFlag"
                >
                  <NSelect
                    :options="permanentListOption"
                    v-model:value="formValue.residentFlag"
                    placeholder="请选择是否常驻居民"
                    clearable
                    style="width: 250px"
                  />
                </NFormItem>
                <NFormItem
                  label="学历:"
                  path="educationCode"
                >
                  <NSelect
                    :options="listSOption"
                    v-model:value="formValue.educationCode"
                    placeholder="请选择学历"
                    clearable
                    style="width: 250px"
                    @update:value="onChangeEducation()"
                  />
                </NFormItem>
                <NFormItem
                  label="单位/学校:"
                  path="organization"
                >
                  <NInput
                    v-model:value="formValue.organization"
                    placeholder="输入单位/学校"
                    style="width: 250px"
                  />
                </NFormItem>
                <NFormItem
                  label="岗位/专业及年级:"
                  path="position"
                >
                  <NInput
                    v-model:value="formValue.position"
                    placeholder="输入岗位/专业及年级"
                    style="width: 250px"
                  />
                </NFormItem>
                <NFormItem
                  label="婚姻状况:"
                  path="marriageCode"
                >
                  <NSelect
                    :options="listMOption"
                    v-model:value="formValue.marriageCode"
                    placeholder="请选择婚姻状况"
                    clearable
                    style="width: 250px"
                  />
                </NFormItem>
              </NSpace>
              <h2 class="title">服务岗位</h2>
              <NSpace>
                <NFormItem
                  label="拟服务岗位:"
                  path="serviceTypesChecked"
                >
                  <NCheckboxGroup
                    v-model:value="serviceTypesChecked"
                    @update:value="handleCheckedChange('service')"
                  >
                    <NSpace>
                      <NCheckbox
                        v-for="item in serviceTypes"
                        :key="item.value"
                        :value="item.value"
                        :label="item.label"
                      />
                    </NSpace>
                  </NCheckboxGroup>
                </NFormItem>
              </NSpace>
              <h2 class="title">联系方式</h2>
              <NSpace>
                <NFormItem
                  label="银行卡号:"
                  path="bankCard"
                >
                  <NInput
                    v-model:value="formValue.bankCard"
                    placeholder="输入银行卡号"
                    style="width: 250px"
                  />
                </NFormItem>
                <NFormItem
                  label="开户行:"
                  path="bankName"
                >
                  <NInput
                    v-model:value="formValue.bankName"
                    placeholder="输入开户行"
                    style="width: 250px"
                  />
                </NFormItem>
                <NFormItem
                  label="电子邮件:"
                  path="email"
                >
                  <NInput
                    v-model:value="formValue.email"
                    placeholder="输入电子邮件"
                    style="width: 250px"
                  />
                </NFormItem>
                <NFormItem
                  label="紧急联系人:"
                  path="emergency"
                >
                  <NInput
                    v-model:value="formValue.emergency"
                    placeholder="输入紧急联系人"
                    style="width: 250px"
                  />
                </NFormItem>
                <NFormItem
                  label="紧急联系电话:"
                  path="emergencyPhone"
                >
                  <NInput
                    v-model:value="formValue.emergencyPhone"
                    placeholder="输入紧急联系电话"
                    style="width: 250px"
                  />
                </NFormItem>
                <NFormItem
                  label="通讯地址:"
                  path="mailAddress"
                >
                  <NInput
                    v-model:value="formValue.mailAddress"
                    placeholder="输入通讯地址"
                    style="width: 250px"
                  />
                </NFormItem>
                <NFormItem
                  label="邮编:"
                  path="zipCode"
                >
                  <NInput
                    v-model:value="formValue.zipCode"
                    placeholder="输入邮编"
                    style="width: 250px"
                  />
                </NFormItem>
                <NFormItem
                  label="固定电话:"
                  path="fixedPhone"
                >
                  <NInput
                    v-model:value="formValue.fixedPhone"
                    placeholder="输入固定电话"
                    style="width: 250px"
                  />
                </NFormItem>
                <NFormItem
                  label="QQ:"
                  path="oicq"
                >
                  <NInput
                    v-model:value="formValue.oicq"
                    placeholder="输入QQ"
                    style="width: 250px"
                  />
                </NFormItem>
              </NSpace>
              <h2 class="title">个人特长</h2>
              <NSpace>
                <NFormItem
                  label="语种及语言:"
                  path="languages"
                >
                  <NInput
                    v-model:value="formValue.languages"
                    placeholder="输入语种及语言"
                    style="width: 250px"
                  />
                </NFormItem>
                <NFormItem
                  label="其他:"
                  path="otherSpeciality"
                >
                  <NInput
                    v-model:value="formValue.otherSpeciality"
                    placeholder="输入其他"
                    style="width: 250px"
                  />
                </NFormItem>
                <NFormItem
                  label="专业特长:"
                  path="specialitys"
                >
                  <NCheckboxGroup
                    v-model:value="specialitysChecked"
                    @update:value="handleCheckedChange('specialitys')"
                  >
                    <NSpace>
                      <NCheckbox
                        v-for="item in specialitys"
                        :key="item.value"
                        :value="item.value"
                        :label="item.label"
                      />
                    </NSpace>
                  </NCheckboxGroup>
                </NFormItem>
                <NFormItem
                  label="学习经历:"
                  path="studyInfo"
                >
                  <NInput
                    v-model:value="formValue.studyInfo"
                    placeholder="输入学习经历"
                    style="width: 250px"
                    type="textarea"
                  />
                </NFormItem>
                <NFormItem
                  label="工作经历:"
                  path="workInfo"
                >
                  <NInput
                    v-model:value="formValue.workInfo"
                    placeholder="输入工作经历"
                    style="width: 250px"
                    type="textarea"
                  />
                </NFormItem>
              </NSpace>
              <NSpace>
                <NFormItem
                  label="对博物馆志愿者工作的看法:"
                  path="viewInfo"
                >
                  <NInput
                    v-model:value="formValue.viewInfo"
                    placeholder="输入对博物馆志愿者工作的看法"
                    style="width: 700px"
                    type="textarea"
                  />
                </NFormItem>
              </NSpace>
            </NForm>
          </NSpace>
        </div>
      </NScrollbar>
    </div>
  </div>
  <FixedAction>
    <NSpace justify="center">
      <NButton
        style="width: 78px"
        ghost
        @click="goBack"
      >
        取消
      </NButton>
      <NButton
        type="primary"
        style="width: 78px"
        @click="confirm"
        :disabled="loading"
        :loading="loading"
      >
        保存
      </NButton>
    </NSpace>
  </FixedAction>
</template>

<script setup lang="ts">
import { ref, onMounted, computed, reactive, watch } from 'vue';
import {
  NSpace,
  NForm,
  NInput,
  NFormItem,
  NButton,
  NScrollbar,
  NSelect,
  useMessage,
  NCheckboxGroup,
  NCheckbox,
  NUpload,
  NInputNumber
} from 'naive-ui'
import type { FormInst } from 'naive-ui'
import router from '@/router'
import { useTagStore } from '@/stores/layout'
import FixedAction from '@/components/FixedAction.vue'
import { sendRequest } from '@/utils/api'
import type { HttpResponse,HttpResponsePagination } from '@/utils/http'
import { useRoute } from 'vue-router'

const tags = useTagStore().tags
const message = useMessage()
const route = useRoute()
const loading = ref(false)
const formRef = ref<FormInst | null>(null)
const title = ref('志愿者档案新增');
const id = ref('');
const sexListOption = ref([
  {
    label: '男',
    value: '0'
  },
  {
    label: '女',
    value: '1'
  }
])
const permanentListOption = ref([
  {
    label: '否',
    value: '0'
  },
  {
    label: '是',
    value: '1'
  }
])
const listOption = ref([])

const listJOption = ref([])

const listZOption = ref([])

const listMOption = ref([])

const listSOption = ref([])

const listIOption = ref([])

const formValue = reactive<any>({
  bankCard: '',
  bankName: '',
  cardNum: '',
  cardType: '',
  cardTypeCode: '',
  education: '',
  educationCode: '',
  email: '',
  emergency: '',
  emergencyPhone: '',
  fileIds: '',
  fileList: [],
  fixedPhone: '',
  languages: '',
  leagueId: '',
  leagueName: '',
  level: '',
  levelCode: '',
  mailAddress: '',
  marriage: '',
  marriageCode: '',
  mobilePhone: '',
  name: '',
  nation: '',
  oicq: '',
  organization: '',
  otherSpeciality: '',
  placeAddress: '',
  position: '',
  residentFlag: '',
  serviceTypes: [],
  sex: '',
  specialitys: [],
  studyInfo: '',
  viewInfo: '',
  workInfo: '',
  zipCode: ''
})
//添加附件
const imgList = ref<any>([])


const serviceTypes = ref<any>([])

const specialitys = ref<any>([])
const specialitysChecked = ref([]);
const serviceTypesChecked = ref([]);

const rules = {
  sex: {
    required: true,
    message: '请选择性别',
    trigger: ['change', 'blur']
  },
  name: {
    required: true,
    trigger: ['change', 'blur'],
    validator(rule:any, value:any) {
      if (!value) {
        return new Error('请输入姓名')
      }
      if (value.length > 20) {
        return new Error('姓名字数不得超过20字')
      }
      return true
    }
  },
  leagueId: {
    required: true,
    message: '请选择文润志愿服务联盟',
    trigger: ['change', 'blur']
  },
  levelCode: {
    required: true,
    message: '请选择级别',
    trigger: ['change', 'blur']
  },
  mobilePhone: {
    required: true,
    // message: '请输入手机号',
    trigger: ['change', 'blur'],
    validator(rule:any, value:any) {
      // 自定义验证  规则
      const regMobile = /^(((\d{3,4}-)?[0-9]{7,8})|(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8})$/
      if (!value) {
        return new Error('请输入手机号')
      } else if (!regMobile.test(value)) {
        return new Error('手机号格式有误')
      }
      return true
    }
  },
  cardTypeCode: {
    required: true,
    message: '请选择证件类型',
    trigger: ['change', 'blur']
  },
  cardNum: {
    required: true,
    message: '请输入证件号',
    trigger: ['change', 'blur']
  },
  placeAddress: {
    required: true,
    trigger: ['change', 'blur'],
    validator(rule:any, value:any) {
      if (!value) {
        return new Error('请输入居住地址')
      }
      if (value.length > 50) {
        return new Error('居住地址字数不得超过20字')
      }
      return true
    }
  },
  bankCard: {
    required: true,
    trigger: ['change', 'blur'],
    validator(rule:any, value:any) {
      if (!value) {
        return new Error('请输入银行卡号')
      }
      if (value.length > 20) {
        return new Error('银行卡号不得超过20字')
      }
      return true
    }
  },
  bankName: {
    required: true,
    trigger: ['change', 'blur'],
    validator(rule:any, value:any) {
      if (!value || value?.length === 0) {
        return new Error('请输入开户行')
      }
      // if (value.length > 20) {
      //   return new Error('开户行字数不得超过20字')
      // }
      return true
    }
  },
  nation: {
    required: true,
    trigger: ['change', 'blur'],
    validator(rule:any, value:any) {
      if (!value) {
        return new Error('请输入民族')
      }
      if (value.length > 20) {
        return new Error('民族字数不得超过20字')
      }
      return true
    }
  },
  serviceTypesChecked: {
    required: true,
    trigger: ['change', 'blur'],
    validator(rule:any, value:any) {
      console.log('serviceTypesChecked', serviceTypesChecked.value)
      if (serviceTypesChecked.value.length == 0) {
        return new Error('请选择服务岗位')
      }
      return true
    }
  },
  residentFlag: {
    required: true,
    message: '请选择是否常驻居民',
    trigger: ['change', 'blur']
  },
  educationCode: {
    required: true,
    message: '请选择学历',
    trigger: ['change', 'blur']
  },
  organization: {
    required: true,
    trigger: ['change', 'blur'],
    validator(rule:any, value:any) {
      if (!value) {
        return new Error('请输入单位/学校')
      }
      if (value.length > 20) {
        return new Error('单位/学校字数不得超过20字')
      }
      return true
    }
  },
  position: {
    required: true,
    trigger: ['change', 'blur'],
    validator(rule:any, value:any) {
      if (!value) {
        return new Error('请输入岗位/专业及年级')
      }
      if (value.length > 20) {
        return new Error('岗位/专业及年级字数不得超过20字')
      }
      return true
    }
  },
  marriageCode: {
    required: true,
    message: '请选择婚姻状况',
    trigger: ['change', 'blur']
  },
  email: {
    required: true,
    message: '请输入电子邮件',
    trigger: ['change', 'blur'],
    validator(rule:any, value:any) {
      // 自定义验证  规则
      const regMobile = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
      if (!value) {
        return new Error('请输入电子邮件')
      } else if (!regMobile.test(value)) {
        return new Error('电子邮件格式有误')
      }
      return true
    }
  },
  emergency: {
    required: true,
    trigger: ['change', 'blur'],
    validator(rule:any, value:any) {
      if (!value) {
        return new Error('请输入紧急联系人')
      }
      if (value.length > 20) {
        return new Error('紧急联系人字数不得超过20字')
      }
      return true
    }
  },
  emergencyPhone: {
    required: true,
    message: '请输入紧急联系电话',
    trigger: ['change', 'blur'],
    validator(rule:any, value:any) {
      // 自定义验证  规则
      const regMobile = /^(((\d{3,4}-)?[0-9]{7,8})|(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8})$/
      if (!value) {
        return new Error('请输入紧急联系电话')
      } else if (!regMobile.test(value)) {
        return new Error('急联系电话格式有误')
      }
      return true
    }
  },
  mailAddress: {
    required: true,
    trigger: ['change', 'blur'],
    validator(rule:any, value:any) {
      if (!value) {
        return new Error('请输入通讯地址')
      }
      if (value.length > 50) {
        return new Error('通讯地址字数不得超过50字')
      }
      return true
    }
  },
  zipCode: {
    required: true,
    message: '请输入邮编',
    trigger: ['change', 'blur']
  },
  languages: {
    required: false,
    trigger: ['change', 'blur'],
    validator(rule:any, value:any) {
      if (value.length > 100) {
        return new Error('语种及语言字数不得超过100字')
      }
      return true
    }
  },
  studyInfo: {
    required: false,
    trigger: ['change', 'blur'],
    validator(rule:any, value:any) {
      if (value.length > 200) {
        return new Error('学习经历字数不得超过200字')
      }
      return true
    }
  },
  workInfo: {
    required: false,
    trigger: ['change', 'blur'],
    validator(rule:any, value:any) {
      if (value.length > 200) {
        return new Error('工作经历字数不得超过200字')
      }
      return true
    }
  },
  viewInfo: {
    required: false,
    trigger: ['change', 'blur'],
    validator(rule:any, value:any) {
      if (value.length > 500) {
        return new Error('对博物馆志愿者工作的看法字数不得超过500字')
      }
      return true
    }
  },
}
const commonUpload = async ({ file, onFinish, onError, onProgress }: UploadCustomRequestOptions) => {
  const fileData = new FormData()
  fileData.append('file', file.file as File)
  const [error, res] = await sendRequest({
    module: 'upload',
    api: 'uploadFile',
    override: {
      data: fileData,
      onUploadProgress(v: any) {
        onProgress({ percent: v.progress })
      }
    }
  })
  if (error) return message.error(error.message)
  if (res.code !== 0) return message.error('上传头像失败'), onError()
  imgList.value.push({
    id: res.data.fileId,
    name: res.data.name,
    status: 'finished',
    path: res.data.url,
    url: res.data.url,
  })
  formValue.headSculpture = res.data.url
  message.success('上传头像成功')
  onFinish()
}
// 删除附件
async function commonRemove({ file }: { file: UploadFileInfo; fileList: Array<UploadFileInfo> }) {
  const index = imgList.value.findIndex((e: any) => e.name === file.name)
  if (index == -1) return message.error('删除头像失败')
  imgList.value.splice(index, 1)
  message.success('删除头像成功')
}

const onChangeEducation = () => {
  let Education = '';
  listSOption.value.forEach((item:any) => {
    if (item.value == formValue.educationCode) {
      Education = item.label
    }
  });
  formValue.education = Education;
}

const onChangeLevel = () => {
  let level = '';
  listJOption.value.forEach((item:any) => {
    if (item.value == formValue.levelCode) {
      level = item.label
    }
  });
  formValue.level = level;
}

// 返回
const goBack = () => {
  const index = tags.findIndex((item: any) => item.path === router.currentRoute.value.fullPath)
  
  tags.splice(index, 1)
  if (tags.length == 0) {
    router.push({ path: '/volunteer/material/file/index' })
  } else history.back()
}

//证件类型下拉
const getZFunction = async () => {
  listZOption.value = []
  const [error, res] = await sendRequest<HttpResponse>({
    module: 'clue',
    api: 'listByParentCode',
    override: {
      params: {
        dicCode: 'A37'
      }
    }
  })
  if (error) return message.error(error.message)
  res.data.forEach((i: any) => {
    // @ts-ignore
    listZOption.value.push({ label: i.dicName, value: i.dicCode })
  })
}

//婚姻类型下拉
const getMFunction = async () => {
  listMOption.value = []
  const [error, res] = await sendRequest<HttpResponse>({
    module: 'clue',
    api: 'listByParentCode',
    override: {
      params: {
        dicCode: 'A53'
      }
    }
  })
  if (error) return message.error(error.message)
  res.data.forEach((i: any) => {
    // @ts-ignore
    listMOption.value.push({ label: i.dicName, value: i.dicCode })
  })
}

//级别类型下拉
const getJFunction = async () => {
  listJOption.value = []
  const [error, res] = await sendRequest<HttpResponse>({
    module: 'clue',
    api: 'listByParentCode',
    override: {
      params: {
        dicCode: 'A51'
      }
    }
  })
  if (error) return message.error(error.message)
  res.data.forEach((i: any) => {
    // @ts-ignore
    listJOption.value.push({ label: i.dicName, value: i.dicCode })
  })
}

//学历类型下拉
const getSFunction = async () => {
  listSOption.value = []
  const [error, res] = await sendRequest<HttpResponse>({
    module: 'clue',
    api: 'listByParentCode',
    override: {
      params: {
        dicCode: 'A52'
      }
    }
  })
  if (error) return message.error(error.message)
  res.data.forEach((i: any) => {
    // @ts-ignore
    listSOption.value.push({ label: i.dicName, value: i.dicCode })
  })
}

//下拉
const getFunction = async () => {
  listOption.value = []
  const [error, res] = await sendRequest<HttpResponse>({
    module: 'volunteer',
    api: 'leagueOptions'
  })
  if (error) return message.error(error.message)
  res.data.forEach((i: any) => {
    // @ts-ignore
    listOption.value.push({ label: i.label, value: i.value })
  })
}

//下拉
const getSpecityInit = async () => {
  const [error, res] = await sendRequest<HttpResponse>({
    module: 'volunteer',
    api: 'volunteerSpecityInit'
  })
  if (error) return message.error(error.message)
  console.log(123)
  serviceTypes.value = res.data.serviceTypes;
  specialitys.value = res.data.specialitys;
}

//修改
const confirm = async () => {
  let service = serviceTypes.value.filter((item:any)=>{
    return item.checked == 1
  })
  let speciality = specialitys.value.filter((item:any)=>{
    return item.checked == 1
  })
  let jsondata = {
    ...formValue,
    serviceTypes: service,
    specialitys: speciality,
  }
  if (imgList.value && imgList.value.length > 0) {
    jsondata.fileList = imgList.value
    jsondata.fileIds = imgList.value[0].id
  }
  if (route.query.id) {
    formRef.value?.validate(async (error) => {
      if (error) {
        message.error('请将必填项填写完整')
        return
      }
      else {
        jsondata.id = route.query.id;
        console.log('jsondata', jsondata)
        try {
          const [error, data] = await sendRequest({
            module: 'volunteer',
            api: 'volunteerUpdate',
            override: {
              data: jsondata
            }
          })

          if (error) throw new Error(error.message)
          if (data.code !== 0) throw new Error(data.msg)
          message.success('操作成功')
          goBack()
        } catch (error: any) {
          message.error(error.message)
        }
      }
    })
  } else {
    formRef.value?.validate(async (error) => {
      if (error) {
        message.error('请将必填项填写完整')
        return
      }
      else {
        try {
          const [error, data] = await sendRequest({
            module: 'volunteer',
            api: 'volunteerSave',
            override: {
              data: jsondata
            }
          })
          if (error) throw new Error(error.message)
          if (data.code !== 0) throw new Error(data.msg)
          message.success('操作成功')
          goBack()
        } catch (error: any) {
          message.error(error.message)
        }
      }
    })
  }
}

onMounted(() => {
  if (route.path == '/volunteer/material/file/edit') {
    title.value = '志愿者档案编辑';
    getInfo(route.query.id);
  } else {
    title.value = '志愿者档案新增';
    getSpecityInit();
  }
  getMFunction()
  getJFunction()
  getSFunction()
  getFunction()
  getZFunction()
})


const handleCheckedChange = (key:string) => {
  if (key == 'service') {
    serviceTypes.value = serviceTypes.value.map((item:any)=>{
      if (serviceTypesChecked.value.indexOf(item.value) != -1) {
        item.checked = 1;
      } else {
        item.checked = 0;
      }
      return item;
    })
    console.log('serviceTypes', serviceTypes.value);
  } else {
    specialitys.value = specialitys.value.map((item:any)=>{
      if (specialitysChecked.value.indexOf(item.value) != -1) {
        item.checked = 1;
      } else {
        item.checked = 0;
      }
      return item;
    })
    console.log('specialitys', specialitys.value);
  }
}

const getInfo = async(id:number)=>{
  const [error, res] = await sendRequest<HttpResponsePagination<any>>({
    module: 'volunteer',
    api: 'volunteerInfo',
    uri: {
      id: id
    }
  })
  if (error) throw new Error(error.message)
  if (res.code !== 0) throw new Error(res.msg)
  let data:any = res.data;
  serviceTypes.value = data.serviceTypes;
  data.serviceTypes.forEach((item:any)=>{
    if (item.checked == 1) {
      serviceTypesChecked.value.push(item.value);
    }
  });
  specialitys.value = data.specialitys;
  data.specialitys.forEach((item:any)=>{
    if (item.checked == 1) {
      specialitysChecked.value.push(item.value);
    }
  });
  // formValue = data;
  data.sex = data.sex.toString();
  data.residentFlag = data.residentFlag.toString();
  Object.assign(formValue, data)
  if (data.fileList && data.fileList.length > 0) {
    let file = data.fileList[0];
    let img = [{
      id: file.id,
      name: file.name,
      status: 'finished',
      url: file.path,
    }]
    Object.assign(imgList.value, img)
  }
}

watch(
  () => route,
  () => {
    if (route.path == '/volunteer/material/file/edit') {
      if (route.query.id) {
        title.value = '志愿者档案编辑';
        getInfo(route.query.id);
      } else {
        title.value = '志愿者档案新增';
        getSpecityInit();
      }
    }
  },
  { deep: true, immediate: true }
)
</script>

<style scoped lang="scss">
@mixin CommonFont {
  font-size: 16rem;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
}

.commonWidth {
  width: 360rem;
}

.main {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;

  .topTitle {
    width: 100%;
    border-bottom: 1px solid #fff;
    padding: 15rem 20rem;
    margin-bottom: 20rem;
    @include CommonFont;
  }
  

  .form_content {
    width: 100%;
    height: 100%;
    padding: 20rem 20rem 0;

    .content {
      display: flex;
      align-items: center;
      flex-direction: column;
      width: 100%;
      height: 100%;
      padding: 18rem 33rem 120rem;
      overflow-y: scroll;
      background-color: #ebeceb;

      .scope {
        width: 360rem;
        height: 130rem;
        background: #e1e1e1;
        margin-bottom: 25rem;
      }
    }
  }
}

.content::-webkit-scrollbar {
  display: none;
}

:deep(.n-spin-container) {
  width: 100%;
  height: 100%;
}

:deep(.n-scrollbar-container) {
  width: 100%;
  height: 100%;
}

:deep(.n-scrollbar-content) {
  width: 100%;
  height: 100%;
}

:deep(.n-spin-content) {
  width: 100%;
  height: 100%;
}
.title {
  width: 100%;
  margin-bottom: 2rem;
}

.bd-title {
  font-size: 26rem;
  margin-bottom: 30rem;
  color: #048c5e;
  line-height: 1;
  text-align: center;
}
</style>
